<!DOCTYPE HTML>
<html>
<head>
    <title>类型管理</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="../assets/css/dpl-min.css" rel="stylesheet" type="text/css" />
    <link href="../assets/css/bui-min.css" rel="stylesheet" type="text/css" />
    <link href="../assets/css/page-min.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="../assets/css/my-code.css">
    <link href="../assets/css/common-style.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="../assets/js/jquery-1.8.1.min.js"></script>
    <script type="text/javascript" src="../assets/js/bui-min.js"></script>
    <script type="text/javascript" src="../assets/js/config-min.js"></script>
    <script src="../assets/js/my.js"></script>
</head>
<body>
<div class="container">
    <ul class="head-nav">
        <li class="active">设备</li>
        <li>安装材料</li>
    </ul>
    <div class="search-mes">
        <div class="row">
            <div class="span16" style="margin-left: 0">
                <div class="panel">
                    <div class="panel-header clearfix" style="background: #eaf1f9">
                        <h3 class="pull-left">双击编辑树</h3>
                        <div id="tbar" class="pull-right"></div>
                    </div>
                    <div class="panel-body" id= "t1">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="search-mes" style="display: none">
        <div class="row">
            <div class="span16" style="margin-left: 0">
                <div class="panel">
                    <div class="panel-header clearfix" style="background: #eaf1f9">
                        <h3 class="pull-left">双击编辑树</h3>
                        <div id="tbars" class="pull-right"></div>
                    </div>
                    <div class="panel-body" id= "t2">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script src="http://g.alicdn.com/bui/seajs/2.3.0/sea.js"></script>
<script src="http://g.alicdn.com/bui/bui/1.1.21/config.js"></script>

<script type="text/javascript">
    BUI.use('common/page');
    BUI.use(['bui/tree','bui/data','bui/toolbar','bui/editor'],function (Tree,Data,Toolbar,Editor) {
        var data=[];
        var store = new Data.TreeStore({
            root : {
                id : '0',
                text : '设备',
                checked : false
            },
            pidField : 'id',
            url : '../data/typeManaData.json',
             autoLoad : true
        });

        var tree = new Tree.TreeList({
            render : '#t1',
            showLine : true,
            height:300,
            store : store,
            checkType : 'all',
            showRoot : true
        });
        tree.render();
        tree.on('itemclick',function(ev){
            var item = ev.item;
            $('.log').text(item.text);
        });
        var store = tree.get('store'),
            editor = new Editor.Editor({
                field : { //设置编辑的字段
                    rules : {
                        required : true
                    }
                },
                autoUpdate : false, //不自动更新对应DOM的文本，而使用store更新数据
                changeSourceEvent : null
            });
        editor.render();

        editor.on('accept',function(){
            var text = editor.getValue(),
                node = editor.get('curNode');
            node.text = text;
            store.update(node);
        });

        //显示编辑器
        function showEditor(node){
            var element = tree.findElement(node);
            editor.setValue(node.text);

            editor.set('curNode',node); //缓存当前编辑的记录
            editor.set('align',{ //设置对齐
                node : $(element).find('.x-tree-icon-wraper'),
                points : ['tr','tl']
            });
            editor.show();
            editor.focus(); //获取焦点

        }
        //双击编辑
        tree.on('itemdblclick',function(ev){
            var node = ev.item;
            showEditor(node);
        });

        var bar = new Toolbar.Bar({
            render : '#tbar',
            elCls : 'button-group',
            children : [
                {
                    elCls : 'button button-primary marginR',
                    content : '新建',
                    handler : function(){
                        var selectedNode = tree.getSelected(),
                            newNode = {text : '新增节点'};
                        newNode = store.add(newNode,selectedNode);
                        tree.expandNode(selectedNode);
                        showEditor(newNode);
                    }
                },
                {

                    elCls : 'button button-bj marginR',
                    content : '编辑',
                    handler : function(){
                        var selectedNode = tree.getSelected(),
                            newNode = {text : '新增节点'};
                        newNode = store.add(newNode,selectedNode);
                        tree.expandNode(selectedNode);
                        showEditor(newNode);
                    }
                },
                {

                    elCls : 'button button-danger marginR',
                    content : '删除',
                    handler : function(){
                        var selectedNode = tree.getSelected();
                        if(selectedNode){
                            store.remove(selectedNode);
                        }

                    }
                }
            ]
        });
        bar.render();



    });
</script>
</html>